<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
    <script src="./finger/fingerprint.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <title>领取防控二维码</title>
</head>
<body>
<div id="app">
    <section id="application">
        <div class="content-wrap">
            <cube-form
                    :model="model"
                    :schema="schema"
                    :immediate-validate="false"
                    :options="options"
                    @validate="validateHandler"
                    @submit="submitHandler"
                    @reset="resetHandler"></cube-form>
        </div>
    </section>
    <section class="Copyright">
        <p><a href="https://gitee.com/developer-dishy/OpenFangKongDengJi">软件声明</a></p>
        <br>
        <p>Copyright&copy;2020<a href="mailto:devDishy@163.com"><b> ZhuDingSheng </b></a> All Rights Reserved.</p>
    </section>

</div>

</body>
<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data() {
                return {
                    validity: {},
                    valid: undefined,
                    model: {
                        fingerid: undefined,
                        name: '',
                        phone: '',
                        company_name: '',
                        housing_name: '',
                        idcard: '',
                    },
                    schema: {
                        groups: [
                            {
                                legend: '请登记您的基础档案以领用防控二维码',
                                fields: [
                                    {
                                        type: 'input',
                                        modelKey: 'name',
                                        label: '姓名',
                                        props: {
                                            placeholder: '请输入您的姓名'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'phone',
                                        label: '电话',
                                        props: {
                                            placeholder: '请输入您的联系方式'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'idcard',
                                        label: '证件号码',
                                        props: {
                                            placeholder: '请输入您的证件信息（如：身份证）'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'housing_name',
                                        label: '防控区域',
                                        props: {
                                            placeholder: '请输入您当前防控的区域名称'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                    {
                                        type: 'input',
                                        modelKey: 'company_name',
                                        label: '单位',
                                        props: {
                                            placeholder: '您的工作单位'
                                        },
                                        rules: {
                                            required: true
                                        },
                                        // validating when blur
                                        trigger: 'blur'
                                    },
                                ]
                            },
                            {
                                fields: [
                                    {
                                        type: 'submit',
                                        label: '领取该区域防控工作二维码'
                                    },
                                    {
                                        type: 'reset',
                                        label: '重新输入'
                                    }
                                ]
                            }
                        ]
                    },
                    options: {
                        scrollToInvalidField: true,
                        layout: 'standard' // classic fresh
                    }
                }
            },
            methods: {
                submitHandler(e) {
                    e.preventDefault()
                    // console.log('submit', this.model)
                    axios.post('/server/api/Fk/receiver', this.model)
                        .then(res => {
                            this.$createImagePreview({
                                $props: {
                                    imgs: ['/server/api/image/QrcodeGenerator?content=' + res.data.content + '&label=' + res.data.label]
                                    , loop: false, preventDefault: false
                                }
                            }).show()
                            console.log(res.data)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                validateHandler(result) {
                    this.validity = result.validity
                    this.valid = result.valid
                    //  console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
                },
                resetHandler(e) {
                    //    console.log('reset', e)
                }
            },
            mounted: function () {
                this.$nextTick(function () {
                    this.model.fingerid = new Fingerprint({screen_resolution: true}).get();
                    axios.post('/server/api/Fk/fk_init', {fingerid: this.model.fingerid}).then(res=>{
                        if (res.data){this.model = res.data}
                    })
                })
            }
        })
    }()

</script>
<style>
    #app {
        height: 100%
    }

    #application {
        padding-left: 1vh;
        padding-right: 1vh;
        width: 95%;
        margin: auto;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }

    .content-wrap {
        width: 100%;
        height: 75%;
        overflow: auto;
        background-color: #fff;
    }
</style>
</html>